<template>
	<view class="home-page">
		<view class="p-rela d-flex justify-center align-center pt-40 user-info-box">
			<view class="p-rela d-flex flex-column justify-center align-start user-info-card">
				<view class="p-rela d-flex px-62 py-20 user-info" @click="toLogin">
					<image src="@/static/images/default_head.png" class="mr-26 avatar"></image>
					<view class="d-flex flex-column justify-center user">
						<view class="font-32 font-bold mb-6">{{ userInfo ? userInfo.realName : '请登录' }}</view>
						<view class="font-24">{{ userInfo ? userInfo.phoneNumber : '' }}</view>
					</view>
				</view>
				<view class="p-rela font-28 pl-30 ml-60 mt-20 company" @click="switchCompany">
					当前机构: {{ deptName || '请选择' }}
				</view>
			</view>
			<view class="d-flex justify-space-between align-center px-30 scenic" @click="switchScenic">
				<view class="d-flex align-center font-28 name">
					<image src="@/static/images/scenic_home.png" class="mr-20" style="width: 56rpx; height: 56rpx">
					</image>
					值班场地：{{ scenicInfo ? scenicInfo.scenicSpotName : '请选择' }}
				</view>
				<view class="d-flex justify-center align-center change-company">
					切换
					<image src="@/static/images/change_scenic.png" class="ml-6"></image>
				</view>
			</view>
		</view>
		<view class="d-flex justify-space-between align-center flex-wrap func-box pt-50 px-30">
			<!--  #ifdef MP-WEIXIN -->
			<view @click="manual" class="d-flex flex-column justify-center align-center mb-24"
				style="width: 308rpx; height: 312rpx">
				<image src="../../../static/images/manual.png" class="mb-26" style="width: 169rpx; height: 171rpx">
				</image>
				<text class="font-28">手动核销</text>
				<text class="font-20 mt-4" style="color: #aaa">手动输入票券号码或手机号</text>
			</view>
			<view @click="record" class="d-flex flex-column justify-center align-center mb-24"
				style="width: 356rpx; height: 312rpx">
				<image src="../../../static/images/record.png" class="mb-26" style="width: 157rpx; height: 171rpx">
				</image>
				<text class="font-28">核销记录</text>
				<text class="font-20 mt-4" style="color: #aaa">输入票号或手机号查看核销记录</text>
			</view>
			<view @click="scan" class="d-flex flex-column justify-center align-center mb-24"
				style="width: 690rpx; height: 476rpx">
				<image src="../../../static/images/scan.png" class="mb-26" style="width: 320rpx; height: 320rpx">
				</image>
				<text class="font-28">扫码核销</text>
				<text class="font-20 mt-4" style="color: #aaa">票券二维码扫描核销</text>
			</view>
			<!--  #endif -->
			<!--  #ifdef  APP -->
			<view @click="manual" class="d-flex flex-column justify-center align-center mb-24"
				style="width: 332rpx; height: 312rpx">
				<image src="../../../static/images/manual.png" class="mb-26" style="width: 127rpx; height: 128rpx">
				</image>
				<text class="font-28 font-bold">手动核销</text>
				<text class="font-20 mt-4" style="color: #000">手动输入票券号码或手机号</text>
			</view>
			<view @click="record" class="d-flex flex-column justify-center align-center mb-24"
				style="width: 332rpx; height: 312rpx">
				<image src="../../../static/images/record.png" class="mb-26" style="width: 118rpx; height: 126rpx">
				</image>
				<text class="font-28 font-bold">核销记录</text>
				<text class="font-20 mt-4" style="color: #000">输入票号或手机号查看核销记录</text>
			</view>
			<view @click="startScan" class="d-flex flex-column justify-center align-center mb-24"
				style="width: 332rpx; height: 312rpx">
				<image src="../../../static/images/duka.png" class="mb-26" style="width: 206rpx; height: 129rpx">
				</image>
				<text class="font-28 font-bold">读卡核销</text>
				<text class="font-20 mt-4" style="color: #000">使用读卡器读卡核销</text>
			</view>
			<view @click="scan" class="d-flex flex-column justify-center align-center mb-24"
				style="width: 332rpx; height: 312rpx">
				<image src="../../../static/images/scan.png" class="mb-26" style="width: 132rpx; height: 132rpx">
				</image>
				<text class="font-28 font-bold">扫码核销</text>
				<text class="font-20 mt-4" style="color: #000">扫描二维码核销</text>
			</view>
			<view @click="gameScore" class="d-flex  justify-center align-center mb-24"
				style="width: 690rpx; height: 178rpx">
				<image src="../../../static/images/defen.png" style="width: 80rpx; height: 98rpx; margin-right: 20rpx;">
				</image>
				<view class="d-flex flex-column">
					<text class="font-28 font-bold">游戏得分</text>
					<text class="font-20 mt-4" style="color: #000">录入用户的游戏得分</text>
				</view>
				
			</view>
			<!--  #endif -->
			
		</view>


		<u-modal v-model="showResult" :content="resultContent" title="核销失败" :show-cancel-button="false"
			confirm-text="关闭"></u-modal>
		<u-modal v-model="showAppScanTip" content="请使用机器扫码按钮进行扫码！" title="提示" :show-cancel-button="false"
			confirm-text="知道了"></u-modal>
	</view>
</template>

<script>
	// #ifdef APP
	const uhfPlugin = uni.requireNativePlugin('Uhf-Plugin')
	import xRemote from "@/uni_modules/shinn-xRemote/js-sdk/index.js";
	// #endif
	let mpShare = require('uview-ui/libs/mixin/mpShare.js');
	import {
		companyList,
		scanWriteOff
		// writeOff,
		// writeOffMember
	} from '@/api/home.js'
	export default {
		// mixins: [mpShare],
		data() {
			return {
				deptName: '',
				deptId: '',
				userInfo: null,
				scenicInfo: null,
				isScan: false,
				showResult: false,
				resultContent: '',
				cardNum: '',
				message: '',
				showAppScanTip: false
			}
		},
		onLoad() {
			let that = this
			uni.$on('scan', function(data) {
				that.isScan = data
			})
			// #ifdef APP
			// 连接读卡设备
			this.connectDevice()
			//添加监听扫码按键
			xRemote.addListener();
			//移除监听扫码按键
			//xRemote.removeListener();
			//打开Debug控制台,通过toast方式显示当前点击的按键code码
			xRemote.openDebug();
			//关闭Debug控制台  默认关闭
			//xRemote.closeDebug();
			//监听器 拿到当前用户点击的code, 扫码按键
			xRemote.getMonitor((code) => {
				console.log("当前点击的按键:" + code)
				if (code == 523) {
					uni.getClipboardData({
						success: (res) => {
							if(res.data) {
								that.$u.throttle(()=> {
									that.appWriteOff(res.data)
								}, 2000)
							}
						},
						fail: (err) => {
							console.error('获取剪贴板内容失败:', err);
						},
						complete: () => {
							console.log('获取剪贴板内容操作结束');
						}
					});
				}

			})

			// #endif
		},
		onUnload() {
			uni.$off('scan')
			// #ifdef APP
			xRemote.removeListener();
			// #endif
		},
		onShow() {
			let userInfo = this.$store.getters.getUserInfo
			if (userInfo) {
				this.userInfo = userInfo
				this.deptName = uni.getStorageSync('deptName') || ''
				this.deptId = uni.getStorageSync('deptId') || ''
				this.scenicInfo = uni.getStorageSync('scenicInfo') || null
			} else {
				this.userInfo = null
				this.deptName = ''
				this.deptId = ''
				this.scenicInfo = null
				uni.clearStorageSync()
			}

			if (this.isScan) {
				this.isScan = false
				// #ifdef APP
				this.startScan()
				// #endif
				// #ifdef MP-WEIXIN
				this.scan()
				// #endif
				
			}
		},
		methods: {
			// #ifdef APP
			connectDevice() { // 连接设备
				uhfPlugin.connectDevice((res) => {
					console.log('结果', res)
					// uni.showToast({
					// 	title: '已连接读卡设备'
					// })
				})
			},
			startScan() { // 开始读卡
				let that = this;
				this.toNav(() => {
					uhfPlugin.scan((res) => {
						that.writeOff(res.epc)
					},err => {
						console.log(err)
					})
				})

			},
			// closeConnect() {
			// 	uhfPlugin.stopInventory()
			// },
			appWriteOff(code) {
				uni.setClipboardData({
					data: '',
					showToast: false
				})
				this.toNav(() => {
					this.writeOff(code)
				})
			},

			// #endif
			toNav(callback) {
				if (!this.userInfo) {
					uni.navigateTo({
						url: '/pages/my-sub/login/login'
					})
					return false
				}
				if (!this.deptId) {
					uni.navigateTo({
						url: '/pages/home-sub/choose-company/choose-company'
					})
					return false
				}
				if (!this.scenicInfo) {
					uni.navigateTo({
						url: '/pages/home-sub/choose-scenic/choose-scenic'
					})
					return false
				}
				callback()
			},
			toLogin() {
				if (!this.userInfo) {
					uni.navigateTo({
						url: '/pages/my-sub/login/login'
					})
				}
			},
			switchCompany() {
				if (!this.userInfo) {
					uni.navigateTo({
						url: '/pages/my-sub/login/login'
					})
					return false
				}
				if (!this.deptId) {
					uni.navigateTo({
						url: `../../home-sub/choose-company/choose-company`
					})
				}
			},
			switchScenic() {
				if (!this.userInfo) {
					uni.navigateTo({
						url: '/pages/my-sub/login/login'
					})
					return false
				}
				if (!this.deptId) {
					uni.showToast({
						title: '请先选择机构',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/home-sub/choose-company/choose-company'
						})
					}, 1500)

					return false
				}
				uni.navigateTo({
					url: '/pages/home-sub/choose-scenic/choose-scenic'
				})
			},
			gameScore() {
				this.toNav(() => {
					uni.navigateTo({
						url: `../../home-sub/game-score/game-score`
					})
				})
			},
			// 扫描核销
			scan() {
				this.toNav(() => {
					// #ifdef APP
					this.showAppScanTip = true
					
					// #endif
					// #ifdef MP-WEIXIN
					// 调起条码扫描
					let that = this
					uni.scanCode({
						onlyFromCamera: true,
						scanType: ['qrCode'],
						success: function(res) {
							const code = res.result
							that.writeOff(code)
						}
					})
					// #endif
					
				})

			},

			writeOff(code) {
				let that = this
				uni.showLoading({
					title: '核销中...',
					mask: true
				})
				scanWriteOff({
						no: code,
						scenicSpotId: that.scenicInfo.scenicSpotId,
						deptId: that.deptId
					})
					.then((res) => {
						const data = JSON.stringify(res.data)
						uni.navigateTo({
							url: `/pages/home-sub/sale-success/sale-success?data=${data}&mark=1`
						})
					})
					.catch((err) => {
						that.resultContent = err.msg
						that.showResult = true
					})
					.finally(() => {
						uni.hideLoading()
					})
			},
			// 手动核销
			manual() {
				this.toNav(() => {
					uni.navigateTo({
						url: `../../home-sub/manual-sale/manual-sale`
					})
				})

			},
			// 核销记录
			record() {
				this.toNav(() => {
					uni.navigateTo({
						url: `../../home-sub/sale-record/sale-record`
					})
				})

			}
		}
	}
</script>
<style>
	page {
		background-color: #eeeeee;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped>
	.home-page {
		background: linear-gradient(to bottom, #ffcc4b, #ffffff);
		overflow-x: hidden;
		.user-info-box {
			width: 750rpx;
			height: 540rpx;

			.user-info-card {
				width: 100%;

				.user-info {
					width: 750rpx;
					box-sizing: border-box;

					.avatar {
						width: 118rpx;
						height: 118rpx;
						z-index: 2;
					}

					.user {
						color: #000;
						z-index: 2;
					}
				}

				.company {
					width: 100%;
					box-sizing: border-box;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000;

					&:before {
						content: '';
						background-image: url('/static/images/org.png');
						width: 25rpx;
						height: 25rpx;
						position: absolute;
						left: 0;
						top: 6rpx;
					}
				}
			}

			.scenic {
				position: absolute;
				bottom: 0;
				width: 690rpx;
				height: 88rpx;
				background-color: #f4c233;
				z-index: 2;
				box-sizing: border-box;
				border-radius: 20rpx 20rpx 0 0;

				.name {
					width: 500rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000;
				}

				.change-company {
					width: 106rpx;
					height: 52rpx;
					background-color: #fff;
					border-radius: 6rpx;
					color: #000;
					flex-shrink: 0;

					image {
						width: 25rpx;
						height: 23rpx;
					}
				}
			}
		}

		.func-box {
			background-color: #eee;
			border-radius: 30rpx 30rpx 0 0;

			view {
				background-color: #fff;
				border-radius: 10rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}
</style>